<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-font.css"/>
		<style type="text/css">
			.ctext{
				position: absolute;
				top: 50%;
				right: 10px;
			    -webkit-transform: translateY(-50%);
			    transform: translateY(-50%);
			    background-color: white;
			    padding: 0.3em;
			}
			.ctext>img{
				width: 30px;
				height: 30px;
			}
			.addposcss{
				width: 100%;
				text-align: center;
				margin-top: 20%;
				color: #7c7c7c;
			}
			
			.mui-table-cell{
				position: relative;
			}
			.mui-badge{
				position: absolute;
			    top: 50%;
			    right: 15px;
			    -webkit-transform: translateY(-50%);
			    transform: translateY(-50%);

			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">职位设置</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="addposition">
		    	<img src="../../img/add.png"/>
		    </div>
		</header>
		<div class="mui-content">
			<p>左滑操作</p>
		    <div class="main" id="poslist">
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-01-14
                	描述：
              
		    	<ul class="mui-table-view">
		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right">
		                    发型师
		                </a>
		                <div class="ctext" >
		                	<img src="../../img/del.png"/>
		                </div>
		            </li>
		        </ul>
		          -->
		    </div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				mui.init();
				var btnArray = ["取消","确定"];
				document.getElementById("addposition").addEventListener("tap",function(e){
					mui.prompt("请输入添加的职位：","","",btnArray,function(e){
						if(e.index == 1){
							console.log(e.value);
							addpos(e.value);
						}
					})
				})
				
				$('#poslist').on('tap', '.mui-btn-yellow', function(event) {
					var elem = this;
					mui.prompt("请输入修改的职位：","","",btnArray,function(e){
						if (e.index == 1) {
							//elem.parentNode.removeChild(elem);
							var id = $(elem).attr("data-id");
							editpos(id,e.value);
							
						} else {
							var li = elem.parentNode.parentNode;
							setTimeout(function() {
								mui.swipeoutClose(li);
							}, 0);
						}
					});
				});
				//第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑
				$('#poslist').on('tap', '.mui-btn-red', function(event) {
					var elem = this;
					mui.confirm('确认删除该条记录？', '', btnArray, function(e) {
						if (e.index == 1) {
							var id = $(elem).attr("data-id");
							delpos(id)
						} else {
							var li = elem.parentNode.parentNode;
							setTimeout(function() {
								mui.swipeoutClose(li);
							}, 0);
						}
					});
				});
				
				getpos();
			}
			
			//获取职位列表
			function getpos(){
				var data = {
					url:"/api/role/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log(res);
					setpos(res.data.data);
				})
			}
			
			//设置职位list
			function setpos(list){
				var str= '';
				if(list.length>0){
					str = '<ul class="mui-table-view">';
					list.forEach(function(item,index){
						str += '<li class="mui-table-view-cell">'+
							'<div class="mui-slider-right mui-disabled">'+
							'<a data-id="'+item.id+'" class="mui-btn mui-btn-yellow ">修改</a>'+
							'<a data-id="'+item.id+'" class="mui-btn mui-btn-red ">删除</a>'+
							'</div>'+
							'<div class="mui-slider-handle">'+
							'<div class="mui-table-cell">'+
							item.role_name+'</div>';
							if(item.is_system_default == 1){
								str += '<span class="mui-badge">默认</span>';
							}
							str += '</div></li>';
					})
					str +='</ul>';
						
				}else{
					str = '<div class="addposcss">请添加职位</div>'
				}
				g("poslist").innerHTML = str;
				
				
			}
			
			//修改职位名称
			function editpos(id,value){
				var data = {
					url:"/api/role/edit",
					data:{
						access_token:acctoken(),
						id:id,
						role_name:value
					}
				}
				ajax(data,function(res){
					mui.toast(res.msg);
					getpos();
				});
				
			}
			
			//添加职位
			function addpos(value){
				var data = {
					url:"/api/role/add",
					data:{
						access_token:acctoken(),
						role_name:value
					}
				}
				ajax(data,function(res){
					mui.toast(res.msg);
					getpos();
				});
				
			}
			
			//删除职位
			function delpos(id){
	            var data = {
	            	url:"/api/role/del",
	            	data:{
	            		access_token:acctoken(),
	            		role_id:id,
	            	}
	            }
	            ajax(data,function(res){
	            	mui.toast(res.msg);
	            	getpos();
	            })
			}
		</script>
	</body>

</html>